<template>
  <div class="flex-grow">
    <div class="d-flex">
      <small class="yield text-grey">让球</small>
      <div class="flex-middle-center flex-grow font-xl">
        <b :class="{'text-red': m.hostHot}">
          <small>{{m.hostRank}}</small>
          {{m.hostShort}}</b>
        <small class="text-grey mx-4">VS</small>
        <b :class="{'text-red': m.guestHot}">{{m.guestShort}}
          <small>{{m.guestRank}}</small>
        </b>
      </div>
    </div>

    <div class="d-flex">

      <div class="flex-column flex-grow lh-25">
        <div class="d-flex" :class="m.had.isBetOne ? 'sg' : 'bt-l'" v-if="m.had">
          <small class="yield text-grey" :class="'bg-' + color(m.had.fixed)">{{m.had.fixed | sign}}</small>
          <div class="g box-xl" :class="on('spf|胜')" @click="select('spf|胜')">主胜 {{m.had.win}}</div>
          <div class="g box-xl" :class="on('spf|平')" @click="select('spf|平')">平 {{m.had.flat}}</div>
          <div class="g box-xl" :class="on('spf|负')" @click="select('spf|负')">客胜 {{m.had.lose}}</div>
        </div>
        <div v-else class="text-grey text-center b-l">未开售</div>

        <div class="d-flex" v-if="m.hhad">
          <small class="yield" :class="'bg-' + color(m.hhad.fixed)">{{m.hhad.fixed | sign}}</small>
          <div class="g box-xl" :class="on('rqspf|让球胜')" @click="select('rqspf|让球胜')">主胜 {{m.hhad.win}}</div>
          <div class="g box-xl" :class="on('rqspf|让球平')" @click="select('rqspf|让球平')">平 {{m.hhad.flat}}</div>
          <div class="g box-xl" :class="on('rqspf|让球负')" @click="select('rqspf|让球负')">客胜 {{m.hhad.lose}}</div>
        </div>
        <div v-else class="text-grey text-center b-l">未开售</div>

      </div>

      <div class="g expand clickable text-light bt-l" :class="bets.length ? 'bg-red-dk' : ''"
           @click="$emit('choose', m)">{{bets.length ? `已选 ${bets.length} 项` : '展开全部'}}</div>
    </div>
  </div>
</template>

<script>
import { mixin } from './calculator'

export default {
  name: 'layout-hhgg',
  mixins: [mixin],
  methods: {
    anyOne () {

    }
  }
}
</script>
